<template>
  <div class="gameentry-update">
    <div class="ct">
      <Form ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="150">
        <Row type="flex">
          <Col>
          <FormItem label="小游戏图片："
                    prop="gameImg01">
            <upload-img :imgType="imgType"
                        @set-img="getimg"
                        :imgUrl.sync="formValidate.gameImg01"></upload-img>
          </FormItem>
          </Col>
          <Col>
          <FormItem label="标题名称："
                    :label-width="120"
                    prop="gameConfigName1">
            <Input v-model="formValidate.gameConfigName1"
                   :maxlength="8"
                   @on-keyup="keyupgameConfigName"
                   style="width:280px;"></Input>
          </FormItem>
          <FormItem label="活动名称："
                    prop="activityName1"
                    :label-width="120">
            <Button @click="jaoinus(1)"
                    v-if="formValidate.activityName1?false:true">添加活动
              <Icon type="ios-add"
                    size="24" /></Button>
            <Col class="active-xg"
                 v-else>
            <div>活动 | {{formValidate.activityName1}}<span @click="del(1)">x</span></div>
            <span @click="revision(1)">修改</span>
            </Col>
          </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col>
          <FormItem label="小游戏图片："
                    prop="gameImg02">
            <upload-img :imgType="imgType2"
                        @set-img="getimg"
                        :imgUrl.sync="formValidate.gameImg02"></upload-img>
          </FormItem>
          </Col>
          <Col>
          <FormItem label="标题名称："
                    :label-width="120"
                    prop="gameConfigName2">
            <Input v-model="formValidate.gameConfigName2"
                   @on-keyup="keyupgameConfigName2"
                   :maxlength="8"
                   style="width:280px;"></Input>
          </FormItem>
          <FormItem label="活动名称："
                    prop="activityName2"
                    :label-width="120">
            <Button @click="jaoinus(2)"
                    v-if="formValidate.activityName2?false:true">添加活动
              <Icon type="ios-add"
                    size="24" /></Button>
            <Col class="active-xg"
                 v-else>
            <div>活动 | {{formValidate.activityName2}}<span @click="del(2)">x</span></div>
            <span @click="revision(2)">修改</span>
            </Col>
          </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col>
          <FormItem label="小游戏图片："
                    prop="gameImg03">
            <upload-img :imgType="imgType3"
                        @set-img="getimg"
                        :imgUrl.sync="formValidate.gameImg03"></upload-img>
          </FormItem>
          </col>
          <Col>
          <FormItem label="标题名称："
                    :label-width="120"
                    prop="gameConfigName3">
            <Input v-model="formValidate.gameConfigName3"
                   :maxlength="8"
                   @on-keyup="keyupgameConfigName3"
                   style="width:280px;"></Input>
          </FormItem>
          <FormItem label="活动名称："
                    prop="activityName3"
                    :label-width="120">
            <Button @click="jaoinus(3)"
                    v-if="formValidate.activityName3?false:true">添加活动
              <Icon type="ios-add"
                    size="24" /></Button>
            <Col class="active-xg"
                 v-else>
            <div>活动 | {{formValidate.activityName3}}<span @click="del(3)">x</span></div>
            <span @click="revision(3)">修改</span>
            </Col>
          </FormItem>
          </Col>
        </Row>
        <FormItem>
          <Button type="primary"
                  class="button"
                  style="margin-right:24px;"
                  @click="submit">确定</Button>
          <Button class="button btn1"
                  @click="cancel">取消</Button>
        </FormItem>
      </Form>
    </div>
    <Drawer title="营销活动"
            width="750"
            class="yxhd"
            v-model="value">
      <div class="search-box">
        <Row type="flex"
             justify="start"
             class="search-item-left">
          <Col class="search-item"
               style="line-height:36px;">活动名称：
          </Col>
          <Col class="search-item">
          <Input v-model="activityName"
                 style="width:180px;"></Input>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  type='primary'
                  @click="search">查询</Button>
          </Col>
          <Col class="search-item">
          <Button class="search-btn"
                  @click="reset">重置</Button>
          </Col>
        </Row>
      </div>
      <Table stripe
             class="table-list"
             :columns="columns"
             :data="tableData"
             :loading="loading"
             :height="tableHeight">
        <template slot-scope="{ row }"
                  slot="radio">
          <span>
            <Radio v-model="row.checked"
                   @click.native="seleted(row)"></Radio>
          </span>
        </template>
        <template slot-scope="{ row }"
                  slot="activityType">
          <span>{{['','刮刮乐','大转盘','砸金蛋'][row.activityType] }}</span>
        </template>
        <template slot-scope="{ row }"
                  slot="activityStatus">
          <span>{{['未开始','进行中','已结束'][row.activityStatus] }}</span>
        </template>
      </Table>
      <Row type='flex'
           justify="end"
           style='padding: 20px'>
        <Col>
        <Page :total="pageObj.total"
              :page-size='pageObj.pageSize'
              :current='pageObj.pageIndex'
              :page-size-opts='[10,20,30,40]'
              show-total
              show-sizer
              @on-change='changePageIndex'
              @on-page-size-change='changePageSize' />
        </Col>
      </Row>
      <div class="demo-drawer-footer">
        <Button style="margin-right: 16px"
                class="btn"
                @click='value = false'>取消</Button>
        <Button type="primary"
                class="btn"
                @click='sureSelect'>确定</Button>
      </div>
    </Drawer>
  </div>
</template>
<script>
import UploadIMg from '@/view/components/upload-img/index.vue'
import { saveGameList, getGameList, activityGames } from '@/api/setting'
import { routeEqual } from '@/libs/util'
export default {
  components: { 'upload-img': UploadIMg },
  data () {
    return {
      imgType: 1,
      imgType2: 2,
      selectRow: {},
      listArr: [],
      imgType3: 3,
      activityName: '',
      activityType: '',
      tableData: [],
      loading: false,
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 10
      },
      columns: [
        {
          title: '  ',
          slot: 'radio',
          width: 50,
          align: 'center'
        },
        {
          title: '场景类型',
          slot: 'activityType',
          align: 'center'
        },
        {
          title: '活动名称',
          key: 'activityName',
          align: 'center'
        },
        {
          title: '开始时间',
          key: 'activityStart',
          align: 'center'
        },
        {
          title: '结束时间',
          key: 'activityEnd',
          align: 'center'
        },
        {
          title: '活动状态',
          slot: 'activityStatus',
          align: 'center'
        }
      ],
      value: false,
      formValidate: {
        gameConfigName1: '',
        gameConfigName2: '',
        gameConfigName3: '',
        activityName1: '',
        activityName2: '',
        activityName3: '',
        activityId1: '',
        activityId2: '',
        activityId3: '',
        gameImg01: '',
        gameImg02: '',
        gameImg03: ''
      },
      ruleValidate: {
        gameConfigName1: [{ required: true, message: '标题名称不能为空', trigger: 'blur' }],
        gameConfigName2: [{ required: true, message: '标题名称不能为空', trigger: 'blur' }],
        gameConfigName3: [{ required: true, message: '标题名称不能为空', trigger: 'blur' }],
        // activityName1: { required: true, message: '请选择活动名称' },
        // activityName2: { required: true, message: '请选择活动名称' },
        // activityName3: { required: true, message: '请选择活动名称' },
        gameImg01: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        gameImg02: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        gameImg03: [{ required: true, message: '图片不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 580 : 0
      return height
    }
  },
  mounted () {
    this.getlist()
    if (!this.hasPermission('moms:globalsetting:gameentryupdate')) {
      this.$router.replace({ name: 'error_401' })
    }
  },
  methods: {
    revision (type) {
      this.value = true
      this.activityType = type
      this.activityName = ''
      this.getGames(type)
    },
    del (type) {
      if (type === 1) {
        this.formValidate.activityName1 = ''
        this.formValidate.activityId1 = ''
      } else if (type === 2) {
        this.formValidate.activityName2 = ''
        this.formValidate.activityId2 = ''
      } else {
        this.formValidate.activityName3 = ''
        this.formValidate.activityId3 = ''
      }
    },
    jaoinus (type) {
      this.value = true
      this.activityType = type
      this.getGames(type)
    },
    getimg (value) {
    },
    keyupgameConfigName () {
      this.formValidate.gameConfigName1 = this.formValidate.gameConfigName1.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    keyupgameConfigName2 () {
      this.formValidate.gameConfigName2 = this.formValidate.gameConfigName2.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    keyupgameConfigName3 () {
      this.formValidate.gameConfigName3 = this.formValidate.gameConfigName3.replace(/[^\w\u4E00-\u9FA5]/g, '')
    },
    closeModal () {
      this.$store.commit('closeTag', this.$route)
      this.$store.commit('setTagNavList', this.$store.state.app.tagNavList.filter(item => !routeEqual(this.$route, item)))
      this.$nextTick(() => {
        this.$router.push({
          name: 'global_setting'
        })
      })
    },
    cancel () {
      this.closeModal()
    },
    sureSelect () {
      this.value = false
      if (this.activityType === 1) {
        this.formValidate.activityName1 = this.tableData.filter(ele => ele.checked)[0] ? this.tableData.filter(ele => ele.checked)[0].activityName : ''
        this.formValidate.activityId1 = this.tableData.filter(ele => ele.checked)[0] ? this.tableData.filter(ele => ele.checked)[0].activityId : ''
      } if (this.activityType === 2) {
        this.formValidate.activityName2 = this.tableData.filter(ele => ele.checked)[0] ? this.tableData.filter(ele => ele.checked)[0].activityName : ''
        this.formValidate.activityId2 = this.tableData.filter(ele => ele.checked)[0] ? this.tableData.filter(ele => ele.checked)[0].activityId : ''
      } if (this.activityType === 3) {
        this.formValidate.activityName3 = this.tableData.filter(ele => ele.checked)[0] ? this.tableData.filter(ele => ele.checked)[0].activityName : ''
        this.formValidate.activityId3 = this.tableData.filter(ele => ele.checked)[0] ? this.tableData.filter(ele => ele.checked)[0].activityId : ''
      }
    },
    // 改变页码
    changePageIndex (pageIndex) {
      this.pageObj.pageIndex = pageIndex
      this.getGames(this.activityType)
    },
    changeSelect (currentRow, oldCurrentRow) {
      this.selectRow = currentRow
      console.log(currentRow)
    },
    // 改变大小
    changePageSize (pageSize) {
      this.pageObj.pageSize = pageSize
      this.getGames(this.activityType)
    },
    getGames (type) {
      this.loading = true
      this.tableData = []
      activityGames({
        merchantId: this.$store.state.user.merchantId,
        activityName: this.activityName,
        activityType: type,
        // activityStatus: 1,
        offset: (this.pageObj.pageIndex - 1) * this.pageObj.pageSize,
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        if (res.data.status === 200) {
          this.listArr = res.data.data || []
          this.listArr.forEach(ele => {
            this.tableData.push({ ...ele, checked: false })
          })

          if (this.formValidate.activityName1 || this.formValidate.activityName2 || this.formValidate.activityName3) {
            if (type === 1) {
              this.tableData.forEach(ele => {
                this.$set(ele, 'checked', false)
                if (ele.activityId === this.formValidate.activityId1) {
                  this.$set(ele, 'checked', true)
                }
              })
            } else if (type === 2) {
              this.tableData.forEach(ele => {
                this.$set(ele, 'checked', false)
                if (ele.activityId === this.formValidate.activityId2) {
                  this.$set(ele, 'checked', true)
                }
              })
            } else {
              this.tableData.forEach(ele => {
                this.$set(ele, 'checked', false)
                if (ele.activityId === this.formValidate.activityId3) {
                  this.$set(ele, 'checked', true)
                }
              })
            }
          }
          this.pageObj.total = res.data.totalCount
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    getlist () {
      getGameList({
        merchantId: this.$store.state.user.merchantId
      }).then(res => {
        if (res.data.status === 200) {
          console.log('ss', res.data.data)
          res.data.data.forEach(ele => {
            if (ele.gameType === 1) {
              this.formValidate.gameConfigName1 = ele.gameConfigName
              this.formValidate.gameImg01 = ele.imageUrl
              this.formValidate.activityName1 = ele.activityName
              this.formValidate.activityId1 = ele.activityId
            } else if (ele.gameType === 2) {
              this.formValidate.gameConfigName2 = ele.gameConfigName
              this.formValidate.gameImg02 = ele.imageUrl
              this.formValidate.activityName2 = ele.activityName
              this.formValidate.activityId2 = ele.activityId
            } else {
              this.formValidate.gameConfigName3 = ele.gameConfigName
              this.formValidate.gameImg03 = ele.imageUrl
              this.formValidate.activityName3 = ele.activityName
              this.formValidate.activityId3 = ele.activityId
            }
          })
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    search () {
      this.pageObj.pageIndex = 1
      this.getGames(this.activityType)
    },
    reset () {
      this.activityName = ''
      this.pageObj.pageIndex = 1
      this.getGames(this.activityType)
    },
    seleted (row) {
      // this.tableData.findIndex(ele.activityId === row.activityId)
      row.checked = true
      // this.tableData.forEach(ele => {
      // })
      this.tableData.forEach(ele => {
        this.$set(ele, 'checked', false)
        if (ele.activityId === row.activityId) {
          this.$set(ele, 'checked', true)
        }
      })
      this.selectRow = row
      // this.$set(this.tableData[this.tableData.findIndex(ele.activityId === row.activityId)], 'checked', true)
      // console.log('ff', row)
    },
    // 提交
    submit () {
      this.$refs.formValidate.validate((val) => {
        if (val) {
          saveGameList({
            merchantId: this.$store.state.user.merchantId,
            gameList: [
              {
                gameType: 1,
                gameConfigName: this.formValidate.gameConfigName1,
                gameUrl: '/pages/games/scratchCard/index',
                imageUrl: this.formValidate.gameImg01,
                activityName: this.formValidate.activityName1,
                activityId: this.formValidate.activityId1
              },
              {
                gameType: 2,
                gameConfigName: this.formValidate.gameConfigName2,
                gameUrl: '/pages/games/bigWheel/index',
                imageUrl: this.formValidate.gameImg02,
                activityName: this.formValidate.activityName2,
                activityId: this.formValidate.activityId2
              },
              {
                gameType: 3,
                gameConfigName: this.formValidate.gameConfigName3,
                gameUrl: '/pages/games/goldenEggs/index',
                imageUrl: this.formValidate.gameImg03,
                activityName: this.formValidate.activityName3,
                activityId: this.formValidate.activityId3
              }
            ]
          }).then(res => {
            if (res.data.status === 200) {
              this.$Message.success('小游戏入口设置成功')
              this.closeModal()
            } else {
              this.$Message.error(`${res.data.error}`)
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.gameentry-update {
  .ct {
    width: 800px;
    padding-top: 100px;
    margin: auto;
  }
  .active-xg {
    > div {
      width: 280px;
      display: inline-block;
      border: 1px solid #dcdee2;
      border-radius: 3px;
      height: 32px;
      line-height: 32px;
      padding-left: 16px;
      position: relative;
      > span {
        position: absolute;
        right: 10px;
        display: inline-block;
        width: 10px;
        height: 10px;
      }
    }
    > span {
      font-size: 12px;
      color: #2d8cf0;
      letter-spacing: 0;
      margin: 0 8px;
    }
    // display: flex;
  }
}
.yxhd .search-box {
  padding-left: 10px;
}
</style>
<style>
.yxhd .ivu-drawer-body {
  padding: 0 !important;
}
.yxhd .demo-drawer-footer {
  width: 750px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>
